<template>
	<view class="content">
  
		 <!-- 搜索框组件 -->
		 <my-input></my-input>
		<!-- 轮播图 -->
		<div class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
				<swiper-item class="swiper-item" v-for="item,index in bannerList" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
				
			</swiper>
			
		</div>
		<!-- nav导航 -->
		<view class="nav">
			<navigator url="/pages/type/type" v-for="(item,index) in navList" :key="index" :open-type="item.open_type">
				<image  :src="item.image_src" mode="widthFix" class="img"></image>
			</navigator>
			
		</view>
		<!-- 楼梯 -->
		<view class="floor">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<!-- 标题图片 -->
				<image :src="item.floor_title.image_src" mode="widthFix" class="title-img"></image>
				<view class="item-flex" v-for="good,i in item.product_list" :key="i">
					<navigator :url="'/sub'+good.navigator_url">
						<image :src="good.image_src" mode="" :class="{active:i>0}"></image>
					</navigator>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getBanner,getNav,getFloor} from '../../utils/api.js'
	import myInput from '../../components/myInput/myInput'
	export default {
		components:{
			myInput
		},
		data() {
			return {
				title: 'Hello',
				msg:'今天是学习uni的第一天我感觉特别好',
				list:[1,2,3,4,5],
				bannerList:[],//存放轮播图的数组
				navList:[],//存放导航
				floorList:[]
			}
		},
		onLoad() {
			// 请求banner
			getBanner({a:1}).then(res=>{
				 this.bannerList = res
			})
			// 请求分类导航
			getNav().then(res=>{
				this.navList = res
				// console.log(this.navList);
				
			})
			// 请求楼梯数据
			getFloor().then(res=>{
				console.log(res);
				this.floorList = res
			})
			
			
			
			

		},
		methods: {
			change(index){
				console.log(index);
				
			},
			changeVal(e){
				console.log(e.target.value);
				console.log(e.detail.value);
			}

		}
	}
</script>

<style lang="scss">
	

	.banner{
		swiper-item{
			width: 100%;
			height: 200px;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 10rpx;
		.img{
			width: 180rpx;
		}
	}
	.floor-item {
		.title-img{
			margin: 10rpx;
		}
	}
	// 750rpx
	.item-flex{
		image{
			width:238rpx;
			height: 490rpx;
			float: left;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
			
		}
	}
	.active{
		height: 240rpx !important;
	}
</style>
